<template>
    <div>
      <div class="onAccount-detail-card-box" :class="creditTicketDetailData ? 'show' : 'hide'">
        <!-- 餐厅名字 -->
        <div class="title">
          {{ dealAssignDataFunction('无', creditTicketDetailData?.detail?.shopInfo?.shop_name) }}
        </div>
        <div class="description">【挂账回款单】</div>
        <!-- 回款单号 -->
        <div class="desc-item">
          <div>回款单号：</div>
          <span>{{
            dealAssignDataFunction('无', creditTicketDetailData?.detail?.orderInfo?.id)
          }}</span>
        </div>
        <!-- 回款时间 -->
        <div class="desc-item">
          <div>回款时间：</div>
          <span>{{
            dealAssignDataFunction('无', creditTicketDetailData?.detail?.orderInfo?.create_time)
          }}</span>
        </div>
        <!-- 回款账户 -->
        <div class="desc-item">
          <div>回款账户：</div>
          <span>{{ dealAssignDataFunction('无', creditTicketDetailData?.detail?.name) }}</span>
        </div>
        <!-- 操作人 -->
        <div class="desc-item">
          <div>操作人：</div>
          <span>{{ dealAssignDataFunction('无', creditTicketDetailData?.detail?.clerkName) }}</span>
        </div>
        <!-- 消费单号 -->
        <div class="desc-item">
          <div>消费单号：</div>
          <span>消费金额</span>
        </div>
        <template v-if="dealAssignDataFunction(false, creditTicketDetailData?.detail?.orderList)">
          <div class="desc-line"></div>
          <div
            class="desc-item"
            v-for="item in creditTicketDetailData?.detail?.orderList"
            :key="item.order_id"
          >
            <div>{{ item.order_id }}</div>
            <span>{{ item.money }}</span>
          </div>
        </template>
  
        <div class="desc-line"></div>
        <!-- 回款合计 -->
        <div class="desc-item">
          <div>回款合计</div>
          <span>{{
            dealAssignDataFunction('0', creditTicketDetailData?.detail?.orderInfo?.pay_money)
          }}</span>
        </div>
        <!-- 支付方式 -->
        <div class="desc-item">
          <div>支付方式：</div>
          <template v-if="dealAssignDataFunction(false, creditTicketDetailData?.detail?.payList)">
            <div v-for="(item, index) in creditTicketDetailData?.detail.payList" :key="index">
              <div v-if="item.pay_method === 'cash'">现金支付</div>
              <div v-else-if="item.pay_method === 'balance'">会员支付</div>
              <div v-else>{{ item.pay_method }}</div>
            </div>
          </template>
          <span v-else>无</span>
        </div>
        <!-- 会员卡号 -->
        <!-- <div class="desc-item">
          <div>会员卡号：</div>
          <span>YLM15512512365</span>
        </div> -->
        <!-- 餐厅地址 -->
        <div class="address-phone-box">
          <div>
            餐厅地址：{{
              dealAssignDataFunction('无', creditTicketDetailData?.detail?.shopInfo?.address)
            }}
          </div>
          <div>餐厅电话：400-0851-123</div>
          <div>技术支持：贵州一粒米科技餐饮软件服务有限公司</div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch } from 'vue'
  import { useOrderStore } from '@/stores/order'
  import { creditRepaymentOrderDetail } from '@/api/statistics'
  import { dealAssignDataFunction } from '@/utils/toolsValidate'
  
  const orderStore = useOrderStore()
  
  // 响应式数据
  const creditTicketDetailData = ref(null)
  
  // 计算属性 - 使用Pinia store
  const selectCreditRepaymentOrder = computed(() => orderStore.getSelectCreditRepaymentOrder)
  
  // 监听器
  watch(
    () => selectCreditRepaymentOrder.value?.id,
    (newV, oldV) => {
      if (newV) {
        getCreditRepaymentOrderDetail(newV)
      }
    },
    { immediate: true, deep: true }
  )
  
  // 方法
  // 获取获取预订小票数据
  const getCreditRepaymentOrderDetail = (id) => {
    const datas = {
      order_id: id
    }
    creditRepaymentOrderDetail(datas).then(res => {
      if (res.status === 200) {
        creditTicketDetailData.value = dealAssignDataFunction(null, res?.data?.detail)
      } else {
        creditTicketDetailData.value = null
        // 重置选中当前表格行的数据
        orderStore.updateSelectCreditRepaymentOrder(null)
      }
    })
  }
  </script>
  
  <style lang="scss" scoped>
  .hide {
    display: none !important;
    transition: all 1s !important;
  }
  .show {
    display: block !important;
    width: 420px !important;
    transition: all 1s !important;
  }
  .onAccount-detail-card-box {
    width: 420px;
    height: 986px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    padding: 30px;
    transition: all 1s !important;
  
    .title {
      font-size: 20px;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: center;
      color: #333333;
    }
    .description {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: center;
      color: #333333;
      margin: 10px 0;
    }
    .desc-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #333333;
    }
    .desc-line {
      width: 360px;
      height: 1px;
      background: #e2e2e2;
      margin-top: 10px;
    }
    .desc-title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: center;
      color: #333333;
      margin: 20px 0 10px 0;
    }
    .address-phone-box {
      margin-top: 50px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #333333;
      line-height: 24px;
      > div {
        margin-bottom: 10px;
      }
    }
  }
  </style>
  